<template>
  <el-card class="box-card">
    <el-row :gutter="20" type="flex" align="middle">
      <el-col :span="2">
        {{ Platform }}
      </el-col>
      <el-col :xs="12" :sm="12" :md="12" :lg="14" :xl="14">
        <el-row><strong>{{ Name }}</strong></el-row>
        <el-row>
          <el-col :xs="0">
            <small><el-link :href="Title">{{ Title }}</el-link></small>
          </el-col>
        </el-row>
      </el-col>
      <el-col :xs="4" :sm="4" :md="8" :lg="8" :xl="8"></el-col>
      <el-col :span="2">
        <i 
          style="font-size: 1.5rem; margin-right: 10px;" 
          :class="Status ? 'el-icon-video-play' : 'el-icon-video-pause'"
          :style="Status ? 'color: #67C23A' : 'color: #F56C6C'"
        ></i>
      </el-col>
    </el-row>
  </el-card>
</template>

<style scoped>
.box-card {
  text-align: initial;
  margin: 1.5rem;
  border-left: solid 3px #409eff;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

el-col {
  overflow: hidden;
}
</style>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      Name: this.name,
      Title: this.title,
      Platform: this.platform,
      Status: this.status,
    };
  },
  props: ["title", "platform", "name", "status"],
  methods: {
    switchChange() {

      let params = {
        control: '',
        LiveURL: this.Title,
      };

      params.control = this.Value ? 'start' : 'stop';

      axios.get('/api/listener', { params }).then((res) => {
        console.log(res)
        if (!res.data.status) {
          this.$notify.error({
            title: '失败',
            message: res.data.msg
          })
          this.Value = !this.Value;
        }
        else this.$notify.success({
          title: '成功'
        });
      }).catch((err) => {
        this.$notify.error({
          title: '错误',
          message: err
        })
        this.Value = !this.Value;
      })
    }
  }
};
</script>